<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">协议价</a></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="top-div-btn-div">
        <el-button class="top-div-btn01" style="width: 90px; height: 30px">
          导入协议价
        </el-button>
        <el-button
          class="top-div-btn01"
          type="primary"
          icon="el-icon-plus"
          style="width: 90px; height: 30px"
        >
          新增
        </el-button>
      </div>
    </div>
    <!-- table-div -->
    <div class="table-div">
      <!-- select选择器。 -->
      <el-select v-model="value01" placeholder="全部" style="width: 160px">
        <el-option
          v-for="item in options01"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="value01"
        placeholder="全部"
        style="width: 230px; margin-left: 5px"
      >
        <el-option
          v-for="item in options02"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- date日期选择器。 -->
      <el-date-picker
        style="width: 210px; margin: 0 5px"
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator=""
        start-placeholder="选择日期"
      ></el-date-picker>
      <!-- input -->
      <el-input
        v-model="input"
        placeholder="请输入客户名称/编码/单号查询"
        style="width: 205px; margin-right: 5px"
      ></el-input>
      <el-input
        v-model="input"
        placeholder="请选商品名//助记码/编码/别名/关键字"
        style="width: 245px; margin-right: 5px"
      ></el-input>
      <!-- button -->
      <el-button
        icon="el-icon-search"
        type="primary"
        style="width: 70px; height: 30px; color: white"
      >
        搜索
      </el-button>
      <!-- table -->
      <el-table
        :data="tableData"
        style="width: 100%; height: 500px; margin-top: 10px"
        border:true
      >
        <el-table-column prop="account" label="集团账号"></el-table-column>
        <el-table-column prop="teamName" label="集团名称"></el-table-column>
        <el-table-column prop="date" label="集团管理员"></el-table-column>
        <el-table-column prop="date" label="集团管理员"></el-table-column>
        <el-table-column prop="date" label="集团管理员"></el-table-column>
        <el-table-column prop="date" label="集团管理员"></el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <!-- {{ tableData[scope.$index].name }} -->
            {{ scope.row.name }}
            <div v-show="scope.row.id === isshow" class="el-butotn-div">
              <el-button>积分变动记录</el-button>
              <el-button>增加积分</el-button>
              <el-button>扣减积分</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- paging 分页 -->
    <div class="bottom-div">
      <span class="demonstration"></span>
      <el-pagination
        class="bottom-div-paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        background
        layout="total, prev, pager, next, sizes , jumper"
        :total="8"
      ></el-pagination>
    </div>
  </div>
</template>
 
<script>
import { getList } from '@/api/customer/agreementprice'

export default {
  data() {
    return {
      options01: [
        {
          value: '选项1',
          label: '全部',
        },
        {
          value: '选项2',
          label: '已下单',
        },
        {
          value: '选项3',
          label: '未下单',
        },
      ],
      value01: '',
      options02: [
        {
          value: '选项1',
          label: '全部区域',
        },
        {
          value: '选项2',
          label: '天心区',
        },
        {
          value: '选项3',
          label: '雨花区',
        },
      ],
      value02: '',
      tableData: [],
      datafilter: {
        priceId: 100,
        pageSize: 5,
        current: 1,
      },
    }
  },
  created() {
    this.paggingQuery()
  },
  methods: {
    async paggingQuery() {
      const res = await getList(this.datafilter)
      console.log(res, '1815')
    },
  },
}
</script>
 
<style scoped lang="scss">
* {
  padding: 0%;
  margin: 0%;
}
.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
    //面包屑的样式。
    .el-breadcrumb {
      margin-left: 23px;
    }
    //top-div的bottom样式。
    .top-div-btn-div {
      text-align: right;
      display: inline-block;
      margin-right: 50px;
    }
  }
  .table-div {
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
  }
  // 分页 。
  .bottom-div {
    //设置分页的位置为“向右对齐”。
    .bottom-div-paging {
      text-align: start;
      margin-left: 20px;
    }
  }
  ::v-deep .el-pagination.is-background {
    margin-top: 0;
  }
}
</style>